<!DOCTYPE html>
<html>
	<head>
		<title>Very simple slide fadeIn / fadeOut</title>
		<script type="text/javascript" src="js/jquery-min.js"></script>
		<script type="text/javascript" src="js/slideshowhide.js"></script>
		
		<script type="text/javascript">
			$(document).ready(function() {
				$('.slide').slideShowHide({ pause : 3000, speed : 1000, width: 640, height: 480, showNumbers: true, onComplete: showIdx });
			});
			
			function showIdx(idx) {
				$('.cont_callback').html("Showing #" + idx);
			}
		</script>
		
		<style type="text/css">
		* {
			padding:0px;
			margin: 0px;
		}
		
		#slide {
			float:left;
		}
		
		ul.buttons {
			list-style-type: none;
		}
		
		ul.buttons li {
			float:left;
		}
		
		ul.buttons li a {
			padding: 5px 10px;
			display:block;
			color: #fff;
			text-decoration: none;
			border: 1px solid red;
			background-color: #680200;
		}
		
		ul.buttons li.selected a {
			background-color: #CC0400;
		}
		
		
		.cont_callback {
			border: 1px solid red;
			padding: 5px;
			float:left;
			margin-left: 50px;
			height: 1em;
		}
		
		.instructions {
			float:left;
			margin-left: 50px;
			margin-top: 20px;
		}
		
		</style>
	</head>
	
	<body>
		<h1>Very simple slide fadeIn / fadeOut</h1>
		<p>Images from <a href="http://www.freephotobank.org" title="Free stock pictures" alt="Free stock pictures">Free Photo Bank</a></p>
		<div id="slide" class="slide">
			<ul>
				<!--<li><a href="http://www.google.com"><img src="imgs/Insect-01.jpg" /></a></li>
				<li><img src="imgs/Insect-06.jpg" /></li>
				<li>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam et magna ut augue vestibulum ultrices. Quisque vestibulum sem in risus adipiscing sollicitudin. Nulla facilisi. Morbi ullamcorper molestie libero ac aliquet. Nullam nibh risus, consectetur non dictum sed, sagittis fringilla purus. Aenean orci mi, ullamcorper eu eleifend quis, accumsan et lacus. Nullam tortor nisl, sodales vel laoreet a, fermentum rutrum risus. </p>
				</li>
				<li><img src="imgs/Insect-10.jpg" /></li>-->
				<li><img src="imgs/Insect-11.jpg" /></li>
				<li><img src="imgs/Insect-40.jpg" /></li>
			</ul>
		</div>
		
		<div class="cont_callback">Show callback here!</div>
		
		<div class="instructions">
			<pre style='color:#000000;background:#ffffff;'>$<span style='color:#808030; '>(</span>document<span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>ready<span style='color:#808030; '>(</span><span style='color:#800000; font-weight:bold; '>function</span><span style='color:#808030; '>(</span><span style='color:#808030; '>)</span> <span style='color:#800080; '>{</span>
   $<span style='color:#808030; '>(</span><span style='color:#0000e6; '>'.slide'</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>slideShowHide<span style='color:#808030; '>(</span><span style='color:#800080; '>{</span> pause <span style='color:#800080; '>:</span> <span style='color:#008c00; '>3000</span><span style='color:#808030; '>,</span> speed <span style='color:#800080; '>:</span> <span style='color:#008c00; '>1000</span><span style='color:#808030; '>,</span> width<span style='color:#800080; '>:</span> <span style='color:#008c00; '>640</span><span style='color:#808030; '>,</span> height<span style='color:#800080; '>:</span> <span style='color:#008c00; '>480</span> <span style='color:#800080; '>}</span><span style='color:#808030; '>)</span><span style='color:#800080; '>;</span>
<span style='color:#800080; '>}</span><span style='color:#808030; '>)</span><span style='color:#800080; '>;</span>
</pre>
		</div>
		
	</body>
</html>
